<template>
  <chart :options="opts" :width="width" :height="height"></chart>
</template>

<script>
import _ from 'lodash'

export default {
  name: 'ChartLine',

  props: ['width', 'height', 'options'],

  computed: {
    opts () {
      console.log(window.lib.flexible.rem2px)
      console.log(window.lib.flexible.rem2px(0.35))
      let fontSize = window.lib.flexible.rem2px(0.35)
      let defaultOptions = {
        tooltip: {
          trigger: 'axis',
          textStyle: {
            fontSize: fontSize
          }
        },
        grid: {
          top: window.lib.flexible.rem2px(0.8),
          right: '1%',
          left: fontSize * 4 + 'px'
        },
        legend: {
          data: ['空气净化器', '微蒸一体机', '美晶'],
          itemGap: fontSize,
          textStyle: {
            fontSize: fontSize
          }
        },
        xAxis: [{
          type: 'category',
          axisLabel: {
            textStyle: {
              fontSize: window.lib.flexible.rem2px(0.3)
            }
          },
          data: ['2.22', '2.23', '2.24', '2.25', '2.26', '2.27', '2.28']
        }],
        yAxis: [{
          type: 'value',
          axisLabel: {
            textStyle: {
              fontSize: fontSize
            }
          }
        }],
        series: [
          {
            name: '空气净化器',
            type: 'line',
            stack: '总量',
            symbol: 'rect',
            symbolSize: fontSize / 2,
            data: [120, 132, 101, 134, 90, 230, 210]
          },
          {
            name: '微蒸一体机',
            type: 'line',
            stack: '总量',
            symbol: 'rect',
            symbolSize: fontSize / 2,
            data: [220, 182, 191, 234, 290, 330, 310]
          },
          {
            name: '美晶',
            type: 'line',
            stack: '总量',
            symbol: 'rect',
            symbolSize: fontSize / 2,
            data: [150, 232, 201, 154, 190, 330, 410]
          }
        ]
      }

      return _.merge({}, defaultOptions, this.options)
    }
  }
}
</script>

<style lang="css">
</style>
